<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Drag to Resize Image</title>  
    <style>  
        #resizableImage {  
            position: absolute;  
            cursor: se-resize;  
        }  
    </style>  
</head>  
<body>  
    <img id="resizableImage" src="./WechatIMG265.jpg" alt="Resizable Image" style="position: relative;">  
    <p>Current Width: <span id="currentWidth">0</span></p>  
    <p>Current Height: <span id="currentHeight">0</span></p>  
  
    <script>
        let isResizing = false;  
let lastMouseX = 0;  
let lastMouseY = 0;  
let originalWidth = 0;  
let originalHeight = 0;  
  
const resizableImage = document.getElementById('resizableImage');  
const currentWidthElement = document.getElementById('currentWidth');  
const currentHeightElement = document.getElementById('currentHeight');  
  
resizableImage.addEventListener('mousedown', (e) => {  
    if (e.button !== 0) return; // Only left mouse button  
    isResizing = true;  
    lastMouseX = e.clientX;  
    lastMouseY = e.clientY;  
    originalWidth = resizableImage.offsetWidth;  
    originalHeight = resizableImage.offsetHeight;  
    document.addEventListener('mousemove', resizeImage);  
    document.addEventListener('mouseup', stopResizing);  
});  
  
function resizeImage(e) {  
    if (!isResizing) return;  

    const dx = e.clientX - lastMouseX;  
    const dy = e.clientY - lastMouseY;  
    const newWidth = originalWidth + dx;  
    const newHeight = originalHeight + dy;  
    if (newWidth > 0 && newHeight > 0) {  
        resizableImage.style.width = newWidth + 'px';  
        resizableImage.style.height = newHeight + 'px';  
        currentWidthElement.textContent = newWidth;  
        currentHeightElement.textContent = newHeight;  
    }  
    lastMouseX = e.clientX;  
    lastMouseY = e.clientY;  
}  
  
function stopResizing() {  
    if (!isResizing) return;  
    isResizing = false;  
    document.removeEventListener('mousemove', resizeImage);  
    document.removeEventListener('mouseup', stopResizing);  
}  
  
// Optional: Prevent text selection while resizing  
document.addEventListener('selectstart', (e) => {  
    if (isResizing) e.preventDefault();  
});
    </script>  
</body>  
</html>